<template>
    <div style="height: 100%;position: relative">
        <el-table :data="currentData" border style="width: 100%">
            <el-table-column prop="orderId" label="订单ID"></el-table-column>
            <el-table-column prop="goodsName" label="商品名称"></el-table-column>
            <el-table-column prop="buyNum" label="购买数量"></el-table-column>
            <el-table-column prop="buyerName" label="收货人姓名"></el-table-column>
            <el-table-column prop="buyerTel" label="收货人手机"></el-table-column>
            <el-table-column prop="sendType" label="寄送类型"></el-table-column>
            <el-table-column prop="orderTime" label="支付时间"></el-table-column>
            <el-table-column prop="orderState" label="订单状态"></el-table-column>
            <el-table-column width="180" label="操作">
                <template>
                    <el-button type="primary" plain style="width: 55px;padding: 10px 0">回复留言</el-button>
                    <el-button type="primary" plain style="width: 85px;padding: 10px 0">修改快递编号</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="position: absolute;bottom: 15px;right: 15px">
            <el-pagination
                    hide-on-single-page
                    layout="prev,pager,next"
                    :total="pageNum"
                    :page-size="3"
                    :page-count="7"
                    :current-page="currentPage"
                    @current-change="changePage"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
    import {mapActions,mapState} from 'vuex'
    export default {
        name: "TableB",
        computed:{
            ...mapState({
                tableData:function (state) {
                    return state.orderStore.tableBData
                }
            }),
            currentData(){
                let begin = (this.currentPage -1) * 3
                let end = (this.currentPage -1) * 3+3
                return this.tableData.slice(begin,end)
            },
            pageNum(){
                return this.tableData.length
            }
        },
        data(){
            return{
                currentPage:1

            }
        },
        methods:{
            ...mapActions(['getTableAData']),
            changePage(val){
                console.log(val)
                this.currentPage = val
            }
        },
        created() {
            this.getTableAData()

        }
    }
</script>

<style scoped>

</style>